<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        /* 
            需求： 点击按钮， 点击谁，谁变色，其余的按钮颜色清空 
            排他思想： 先清空所有， 留下我自己 
        */

        let btn = document.querySelectorAll('button')

        for (let i = 0; i < btn.length; i++) {
            //  当前按钮绑定点击事件 
            btn[i].onclick = function () {
                //  给每一个按钮样式 清空 
                for (let j = 0; j < btn.length; j++) {
                    btn[j].style.color = '';
                };
                this.style.color = 'red'
                
            }

        };
        console.log(this);
    </script>
</body>

</html>